<template>
    <!-- 中心动态tab页 -->
    <div class="maxBoxs">
        <div class="center-box">
            <el-container>
                <el-aside width="200px">
                    <el-menu class="el-menu-demo" mode="horizontal" router background-color="#0049ac" text-color="#fff"
                        active-text-color="#fff">
                        <el-menu-item index="/central-dynamics">
                            <template #title>
                                <i class="el-icon-s-order"></i><span style="width:200px">中心动态 <i
                                        class="el-icon-d-arrow-right"></i></span>
                            </template>
                        </el-menu-item>
                    </el-menu>
                </el-aside>

                <el-container>
                    <el-header>
                        <div class="title">
                            <div class="left-title"><span>教学设备</span></div>
                            <!-- <div class="right-location">您所在的位置: <span>网站首页 > 教学科研 > 教学设备</span></div> -->
                            <div class="right-location"><span>您所在的位置:</span> &nbsp;
                                <!-- 面包屑 -->
                                <el-breadcrumb separator-class="el-icon-arrow-right">
                                    <el-breadcrumb-item :to="{ path: '/' }">网站首页</el-breadcrumb-item>
                                    <el-breadcrumb-item>教学科研</el-breadcrumb-item>
                                    <el-breadcrumb-item>教学设备</el-breadcrumb-item>
                                </el-breadcrumb>
                            </div>
                        </div>
                    </el-header>

                    <el-main>
                        <div class="main-contont">
                            <!-- 每条信息 -->
                            <div class="contont-info" v-for="(item, index) in 4" :key="index">
                                <div class="left-img">
                                    <img style="width:100%;height:100%" src="../../assets/banner1@2x.png" alt="">
                                </div>
                                <div class="right-info">
                                    <div class="info-title"><span>学术报告—— 有微⻛滑过的清⾹，有阳光照射的明媚，有树叶⼉滑落的声响</span></div>
                                    <el-divider></el-divider>

                                    <div class="introduce">
                                        <span> 岁⽉轮转，时光静静的流逝，⾦秋的⻛，悄悄地拂过窗棂，轻轻地掀起清秋的⾯纱，听⻛，唱响时间的流淌，穿过，
                                            岁⽉沧桑的河岸，仿佛，经年就在眼前，那些消失在岁⽉⻓河⾥的⼈和事，还有⼀些⼀些的美丽，都化着点滴斑斓，⻜散在这
                                            个季节深处。岁⽉，就是⼀轮维修机，有再多磨合都已不在重要，重要的是有⼀颗宽容，淡定，从容的⼼。守着⼀份份清淡，
                                            ⽣活已不再那么烦躁，或许，⽣活就是要我们简单随和</span>
                                    </div>
                                    <el-button type="primary" round class="btn" size="mini" @click="checkDetails()">查看详情
                                        > ></el-button>
                                </div>
                            </div>

                            <!-- 分页器 -->
                            <div class="pangination">
                                <el-pagination background layout="prev, pager, next" :total="200">
                                </el-pagination>
                            </div>
                        </div>
                    </el-main>
                </el-container>

            </el-container>
        </div>

        <!-- 底部 -->
        <common-button />
    </div>
</template>

<script>
import CommonButton from '@/components/CommonButton/CommonButton.vue';
export default {
    methods: {
        // 查看详情按钮
        checkDetails() {
            console.log('查看详情');
        }
    },
    components: {
        CommonButton
    }
}
</script>

<style lang="less" scoped>
.maxBoxs {
    width: 100%;
    height: 90.4vh; //vh显示背景 %不会显示
    background: url(../../assets/school2x.png) no-repeat;
    background-size: 100% auto;
}

.center-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 1.9rem;
    bottom: 0;
    margin: auto;
    width: 73%;
    height: 36rem;
    background: #fff;
    padding: 1.8rem;
    overflow: hidden;
    z-index: 99;
}

.el-container {
    height: 36rem;
}

.el-menu.el-menu--horizontal {
    border-bottom: none;
}

/deep/.el-aside {
    background-color: #e8f4ff;
    color: #333;
    text-align: center;
    min-height: 31rem;
}

.el-menu--horizontal>.el-menu-item {
    width: 100%;
}

// 头部
.el-header {
    text-align: center;
    line-height: 60px;
    background: #fff;

    // 顶部盒子
    .title {
        display: flex;
        justify-content: space-between;

        .left-title {
            font-weight: bold;
            font-size: 1.5rem;
            color: red;
        }

        // 面包屑位置
        .right-location {
            color: #b3b3b3;
            font-size: 0.8rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.el-icon-s-order {
    color: #fff;
}

.el-icon-d-arrow-right {
    color: #fff;
    padding-left: 2.9rem;
}


// 内容盒子
.el-main {
    padding: 0;
    background: #fff;
}

.main-contont {
    width: 96%;
    height: 65vh;
    margin-left: 1.312rem;
    border: 1px solid #e7e7e7;
}

.contont-info {
    display: flex;
    margin: auto;
    padding: 20px;
    width: 95%;
    height: 7.4rem;
    border-bottom: 1px dashed #e7e7e7;
}

.left-img {
    width: 165px;
    height: 6.5rem;
    background: skyblue;
}

.right-info {
    width: 100%;
    font-size: 12px;
    padding-left: 13px;
}

.info-title {
    display: flex;
    justify-content: flex-start;
}

.el-divider--horizontal {
    margin: 9px 0;
}

.introduce {
    color: #919191;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

// 按钮靠左
.btn {
    float: left;
}

// element 按钮默认颜色
.el-button--primary {
    background: #7fb6ea;
    border-color: #7fb6ea;
}

// element 按钮触摸变
.el-button--primary:hover {
    background: #c9141e;
    border-color: #c9141e;
}

// 分页器
.pangination {
    width: 73%;
    height: 33px;
    position: absolute;
    left: 250px;
    bottom: 24px;
    text-align: center;
    background: #fff;
}

// 分页器
.el-pagination {
    padding: 0.25rem 0.3125rem;
}
</style>